<template>
    <section class="drilling-data">
        <!-- 地图信息 -->
        <div class="card map-info">
            <div class="card-title">
                <img src="@/assets/images/label.png">
                地图信息
            </div>
            <div class="card-content" style="display: flex; align-items: center;">
                <!-- 左侧图表 -->
                <div style="flex:1">
                    <DrillChart></DrillChart>
                </div>
                <!-- 右侧信息 -->
                <div class="map-info-message">
                    <div class="map-info-message-con">
                        <span>当前钻机：</span>
                        <div>31#钻机</div>
                    </div>
                    <div class="map-info-message-con">
                        <span>地图标号：</span>
                        <div style="color: #4BB3E8 ;">L5000-0214-0901</div>
                    </div>
                    <div class="map-info-message-con">
                        <span>海拔高度：</span>
                        <div style="color: #4BB3E8 ;">500.56</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 钻机信息 -->
        <div class="card drilling-info">
            <div class="card-title">
                <img src="@/assets/images/label.png">
                钻机信息
            </div>
            <div class="card-content">
                <div class="drilling-content">
                    <div class="drill-detail">
                        <div>
                            <p>任务名称: <span class="highlight">L500-0214-31</span></p>
                            <p>任务孔数: <span class="highlight">74</span></p>
                            <p>完成孔数: <span>15</span></p>
                        </div>
                        <div>
                            <p>钻机名称: <span class="highlight">A6</span></p>
                            <p>岩石硬度: <span class="highlight">正常</span></p>
                            <p>目标海拔: <span>475</span></p>
                        </div>
                        <div>
                            <p>目标孔深: <span class="red">17.56</span></p>
                            <p>目标孔深: <span class="red">17.56</span></p>
                            <p>履带高程: <span class="highlight">500.86</span></p>
                        </div>
                    </div>
                </div>
                
                <div class="drill-img-status">
                    <img class="drill-img" src="@/assets/images/drill.png" alt="钻机" />
                    <div class="status-list">
                        <div>
                            <div><p>变频器<img src="@/assets/images/warning.png"></p></div>
                            <div><p>综合故障<img src="@/assets/images/ok.png"></p></div>
                        </div>
                        <div>
                            <div><p>行走电机<img src="@/assets/images/warning.png"></p></div>
                            <div><p>提行电机<img src="@/assets/images/ok.png"></p></div>
                        </div>
                        <div>
                            <div><p>加压电机<img src="@/assets/images/warning.png"></p></div>
                            <div><p></p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <!-- 车辆信息 -->
        <div class="card vehicle-info">
            <div class="card-title">
                <img src="@/assets/images/label.png">
                车辆信息
            </div>
            <div class="card-content gauges">
                <div>
                    <GaugeCard title="液压油液位" :value="0.49" />
                    <GaugeCard title="降尘水液位" :value="0.49" />
                    <GaugeCard title="提升电流" :value="0.49" />
                    <GaugeCard title="辅空风压" :value="0.49" />
                </div>
                <div>
                    <GaugeCard title="系统油压" :value="0.49" />
                    <GaugeCard title="主空风压" :value="0.49" />
                    <GaugeCard title="回转速度" :value="0.49" />
                    <GaugeCard title="回转电流" :value="0.49" />
                </div>
            </div> 
        </div>

        <!-- 日志 -->
        <div class="card log-info">
            <div class="card-title">
                <img src="@/assets/images/label.png">
                日志
            </div>
            <div class="card-content log-list">
                <div class="log-item" v-for="i in 5" :key="i">
                    <span class="log-time">02-14 13:23:34</span>
                    <span class="log-msg">钻机13电缆卷筒故障</span>
                </div>
            </div>
        </div>
    </section>
</template>

<script lang="ts" setup>

</script>

<style scoped lang="scss">
.drilling-data {
    display: flex;
    flex-direction: column;
    // gap: 10px;
    color: #fff;
    font-size: 14px;
    padding: 10px 22px;
    .card{
        // margin-bottom: 15px;
        .card-title{
            position: relative;
            padding: 0px 0 5px 10px;
            img{
                width: 10px;
                height: 10px;
            }
            &::after { 
                content:'';
                position: absolute;
                left: 0;
                bottom: 0;
                height: 1px;
                width: 140px;
                background: linear-gradient(90deg, #4BB3E8 0%, #4AB3E8 30%, #4AB3E8 70%, #033361 100%);
            }
        }
        .card-content{
            margin-top: 10px;
        }
    }
    .card:last-child{
        margin-top: 0;
    }

    .map-info{
        .map-info-message{
            width: 170px;
        }
        .map-info-message-con {
            display: grid;
            gap: 10px;
            margin-bottom: 16px;
            border-left: 1px solid #4bb3e8;
            background: linear-gradient(to right, #2c6093, #0c3d6c, #033361);
            padding: 3px 8px;
            span{
                // font-size: 16px;
            }
            span + div{
                color: #e6f59c;
                font-size: 16px;
                font-weight: bold;
            }
        }
        .map-info-message-con:last-child{
            margin-bottom: 0;
        }
    }

    // 钻机信息
    .drilling-info{
        .drilling-content {
            display: flex;
            gap: 32px;
            align-items: flex-start;
            padding: 10px;
            border-top: 1px solid #429ed3;
            border-bottom: 1px solid #429ed3;
            background: linear-gradient(to bottom, #2b5f93, #043462, #2b5f93);
            .drill-detail {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 8px;
                span{font-weight: bold;}
                .highlight {
                    color: #4BB3E8;
                    margin-right: 8px;
                }
                .red {
                    color: #EB5454;
                }
            }
            .drill-detail > div{
                display: flex;
                align-items: center;
                p{flex:1};
                p:first-child{
                    flex:1.3;
                }
            }
        }
        .drill-img-status {
            display: flex;
            padding-top: 20px;
            .drill-img {
                width: 90px;
                margin-bottom: 10px;
            }
            .status-list {
                flex:1.3;
                display: flex;
                flex-direction: column;
                gap: 6px;
                height: fit-content;
                background: linear-gradient(to right, #2b5f93, #043462, #2b5f93);
                border-radius: 20px;
                padding: 15px 20px;
                border-left: 1px solid #44a7db;
                border-right: 1px solid #44a7db;
            }
            .status-list > div{
                display: flex;
                img{
                    width: 24px;
                    height: 24px;
                    margin-left: 5px;
                }
                p{
                    flex:1;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    padding: 0 20px;
                }
            }
            .status-list > div > div{
                flex:1;
            }
        }
        .drill-img-status > img{
            flex:1;
        }
    }

    // 车辆管理
    .vehicle-info {
        .gauges {
            display: grid;
            gap: 0 16px;
            grid-template-columns: repeat(2, 1fr);

            & > div {
                display: contents;
            }

            :deep(.gauge-card) {
                min-width: 0;
            }
        }

        @media (min-width: 1440px) {
            .gauges {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (min-width: 1920px) {
            .gauges {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }

    // 日志
    .log-info{
        .log-list{
            display: grid;
            gap: 2px;
            font-size: 12px;
        }
        .log-item{
            height: 26px;
            background-color: #1b4e80;
            padding: 3px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .log-msg{
                color:#E3F7A0;
            }
            .log-msg-fail{
                color: #EB5454;
            }
        }
    }
}
</style>
